<template>
  <div class="user">
    <div class="chaxun">
      <el-form :inline="true" :model="formInline" ref="seachFrom">
        <el-form-item label="图片id" prop="id">
          <el-input v-model="formInline.id"></el-input>
        </el-form-item>
        <el-form-item label="图片状态" prop="picStatus">
          <el-select v-model="formInline.picStatus">
            <el-option label="全部" value=""></el-option>
            <el-option label="启用" value="1"></el-option>
            <el-option label="禁用" value="2"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button type="primary" @click="chongzhi">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="allbutton">
      <el-button type="primary" @click="addmodel">新增</el-button>
      <el-button type="primary" @click="deldata(0)">删除</el-button>
      <el-button type="primary" @click="deldata(1)">启用</el-button>
      <el-button type="primary" @click="deldata(2)">禁用</el-button>

    </div>

    <div class="biaoge">
      <el-table
        ref="multipleTable"
        :data="tableData"
        stripe
        border
        tooltip-effect="dark"
        max-height="350"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="id" label="图片id" width="50" sortable></el-table-column>
        <el-table-column prop="picUrl" label="图片路径" width="400" sortable></el-table-column>
        <el-table-column prop="picStatusName" label="图片状态" width="100" sortable></el-table-column>
        <el-table-column prop="picUrl" label="图片详情" width="450" sortable>
          <template slot-scope="scope">
            <div><img :src="scope.row.picUrl" width="200"></div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10,50,100, 200, 300, 400]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalnum"
      ></el-pagination>
    </div>
    <!-- 新增用户 -->
    <el-dialog
      title="新增用户"
      :visible.sync="dialogVisibleadd"
      :close-on-click-modal="false"
      :show-close="false"
      :modal-append-to-body="false"
    >
      <el-form :inline="true">
        <el-form-item label="图片" prop="images" label-width="100px">
          <el-upload
            :action="upImgUrl"
            :limit="1"
            list-type="picture-card"
            :file-list="fileList"
            :on-preview="handlePictureCardPreview"
            :on-success="handleAvatarSuccess"
            :on-remove="handleRemove"
            :on-exceed="handleExceed">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible" :append-to-body="true">
            <img width="100%" :src="dialogImageUrl">
          </el-dialog>
        </el-form-item>   
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="quxiao">取 消</el-button>
        <el-button type="primary" @click="sureadd">确 定</el-button>
      </span>
    </el-dialog>
   
  </div>
</template>

<script>
export default {
  data() {
    return {
      formInline: {
        picStatus:"",
        id:"",
        pagesize:"",
        pageNum:"",
      },
      tableData:[],
      upImgUrl:this.$store.state.url+'/goods/uploadImage',
      fileList:[],//图片容器
      dialogImageUrl: '',
      dialogVisible: false,
      dialogVisibleadd:false,
      totalnum: 0,
      pagesize: 10,
      currentPage: 1,
      // hasChooseList: []
    };
  },
  beforeMount() {
    this.getData();
  },
  methods: {
    //删除图片
    handleRemove(file, fileList) {
      this.fileList=fileList
    },
    //查看图片
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleAvatarSuccess(res,file,fileList){
      this.fileList=fileList
    },
    handleExceed(files,fileList){
      this.$message.console.warning('一次只能上传一张图片');
      
    },
    getData() {
      this.formInline.pagesize=this.pagesize
      this.formInline.pageNum=this.currentPage
      this.$axios.post(this.$store.state.url+'/picture/listBanner',this.formInline).then(res => {
          if (res.data.code == 1) {
            this.tableData=res.data.data
            this.totalnum=res.data.data.total
          }else{
            this.$message({
              showClose: false,
              message: res.data.msg,
              type: 'error'
            });
          }
        })
    },
    //重置
    chongzhi(){
      this.$refs["seachFrom"].resetFields()
      this.pagesize= 10
      this.currentPage= 1
      this.getData()
    },
    //查询
    onSubmit() {
      this.getData()
    },
    //对话框取消
    quxiao() {
      this.dialogVisibleadd = false;
      this.dialogVisibleedit = false;
    },
    //点开新增对话框
    addmodel() {
      this.dialogVisibleadd = true;
      if (this.$refs["addruleForm"]) {
        this.$refs["addruleForm"].resetFields();
      }
      this.fileList=[]
    },
    //确认新增
    sureadd() {
      if(this.fileList.length>0){
        console.log(this.fileList)
        var list={
          picUrl:this.fileList[0].response.data
        }
        this.$axios.post(this.$store.state.url+'/picture/addPic',list).then(res => {
        if (res.data.code == 1) {
          this.getData();
          this.dialogVisibleadd = false;
        }else{
          this.$message({
            showClose: false,
            message: res.data.msg,
            type: 'error'
          });
        }
      })
    }else{
      this.$message({
        showClose: false,
        message: '请上传一张图片',
        type: 'error'
      })
    }
    },
    //多选
    handleSelectionChange(val) {
      this.hasChooseList = val;
    },
    //删除
    deldata(val) {
      console.log(this.hasChooseList)
      this.title=''
      if(val==0){
        this.title='删除'
        val=''
      }else if(val==1){
        this.title='启用'
      }else if(val==2){
        this.title='禁用'
      }
      if (0 < this.hasChooseList.length) {
        this.$confirm("此操作将永久"+this.title+"该文件, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
            this.$axios.get(this.$store.state.url+'/picture/updateBanner?id='+this.hasChooseList[0].id+'&status='+val).then(res => {
          if (res.data.code == 1) {
            this.getData();
            this.$message({
              type: "success",
              message: this.title+"成功!"
            })
          }else{
            this.$message({
              showClose: false,
              message: res.data.msg,
              type: 'error'
            });
          }
        })       
         }).catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
      } else {
        this.$message.error("请选择一条数据进行删除");
      }
    },
    handleSizeChange(val) {
      this.pagesize=val
      this.getData()
    },
    handleCurrentChange(val) {
      this.currentPage=val
      this.getData()
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.biaoge {
  margin-top: 30px;
}
.block {
  float: right !important;
}
</style>

<style>
.user .el-input__inner{
    width: 200px !important
}
</style>

